<template>
	<view>
		<!-- 知识库 -->
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item" style="position: absolute;left: 0;right: 0;margin: auto;width: 50%;">工程档案</view>
				</uni-nav-bar>
			</view>
			<view class="attch-container">
				<view class="attch-option" >
					<view class="attch-pic">
						<view class="attch-tp"><image src="../../../static/images/ytp.png" mode=""></image></view>
					</view>
					<view class="attch-words">图片</view>
					<view class="attch-bluewords">50</view>
				</view>
				<navigator class="attch-option" url="attch-info-detail">
					<view class="attch-pic">
						<view class="attch-tp"><image src="../../../static/images/ywd.png" mode=""></image></view>
					</view>
					<view class="attch-words">文档</view>
					<view class="attch-bluewords">120</view>
				</navigator>
				<view class="attch-option">
					<view class="attch-pic">
						<view class="attch-tp"><image src="../../../static/images/ysp.png" mode=""></image></view>
					</view>
					<view class="attch-words">视频</view>
					<view class="attch-bluewords">55</view>
				</view>
				<view class="attch-option">
					<view class="attch-pic">
						<view class="attch-tp"><image src="../../../static/images/yyp.png" mode=""></image></view>
					</view>
					<view class="attch-words">音频</view>
					<view class="attch-bluewords">0</view>
				</view>
				<view class="attch-option">
					<view class="attch-pic">
						<view class="attch-tp"><image src="../../../static/images/yysb.png" mode=""></image></view>
					</view>
					<view class="attch-words">压缩包</view>
					<view class="attch-bluewords">10</view>
				</view>
				<view class="attch-option">
					<view class="attch-pic">
						<view class="attch-tp"><image src="../../../static/images/ytz.png" mode=""></image></view>
					</view>
					<view class="attch-words">工程图纸</view>
					<view class="attch-bluewords">5</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
export default {
	components: {
		uniDrawer,
		uniNavBar,
		uniIcon,
	},
	data() {
		return {};
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f2f2f2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.uni-navbar__header-btns {
	padding: 0;
}

.example-body {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.page-index {
	width: 100%;
	height: 44px;
	background-color: #003466;
	padding-top: 30px;
	font-size: 16px;
	color: #ffffff;
	line-height: 44px;
	position: relative;
	overflow: hidden;
	display: flex;
}

.all-style {
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
}

.cmd-icon {
	margin-left: 1%;
	z-index: 1;
}

.attch-container {
	width: 96%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.attch-container .attch-option {
	width: 49%;
	height: 130px;
	background: #ffffff;
	margin-top: 14px;
	border-radius: 3px;
}

.attch-pic {
	width: 100%;
	height: 30px;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 28px;
}

.attch-tp {
	width: 27px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.attch-tp image {
	max-width: 100%;
	max-height: 100%;
}

.attch-words {
	width: 100%;
	color: #666666;
	text-align: center;
	font-size: 15px;
	margin-top: 7px;
}

.attch-bluewords {
	width: 100%;
	text-align: center;
	font-size: 16px;
	color: #84bff8;
}
</style>
